<template>
	<div style="width: 100%;padding-right: 30px;">
		<h1 style="text-align: left; margin: 30px;">
			<span @click="mode='swipter'" :style="{color:mode=='swipter'?'#aa0000':'#000'}">配置首页</span> / <span @click="mode='hot'"
			 :style="{color:mode=='hot'?'#aa0000':'#000'}">配置热门文章</span></h1>
		<div class="h-h-sa-v-center">
			<div class="left" style="flex: 7;">
				<div v-if="mode=='swipter'?true:false">
					<Transfer :data="data2" :target-keys="targetKeys2" filterable :titles='["商品","首页"]' :filter-method="filterMethod"
					 @on-change="handleChange2"></Transfer>
				</div>
				<div v-if="mode=='hot'?true:false">
					<Transfer :data="data2" :target-keys="targetKeys2" filterable :titles='["文章","热门"]' :filter-method="filterMethod"
					 @on-change="handleChange2"></Transfer>
				</div>
				<div style="margin-top: 30px;">
					<Button style="margin: 20px;" type="primary">立即生效</Button>
					<Button style="margin: 20px;">预览</Button>
				</div>
			</div>
			<div style="flex: 2;margin-top: -40px;">
				<div v-if="mode=='swipter'?true:false" style="height:calc(76vh); position: relative;border-radius: 15px;overflow:hidden;flex: 1; width: 100%;"
				 class="demo-split v-h-start-v-start">
					<h3 style="margin:15px 0 15px 15px">
						<Icon type="ios-planet" style="margin-bottom:3px; margin-right:10px" size="20" />首页</h3>
					<div>
						<div style="width: 350px;" class="v-hv-center">
							<!-- <img style="width:100%" src="https://qnz.smzdm.com/202102/09/602235d4b1f768475.jpg_foc.jpg" alt=""> -->
							<Carousel style="width: 100%;" v-model="value1" loop dots="none" arrow="never" :autoplay="true">
								<CarouselItem v-for="(item, index) in 3" :key="index">
									<div style="width: 100%;" class="vh-center">
										<img style="width: 100%;" src="https://qnz.smzdm.com/202102/09/602235d4b1f768475.jpg_foc.jpg" alt="">
									</div>
								</CarouselItem>

							</Carousel>
						</div>



						<div class="v-hv-center" style="margin:30px 20px; font-size: 16px;">
							<h1>科沃斯 地宝 T9 扫地机器人</h1><br />
							<div>DEEBOT T9，9合1，集大成者，岂止于净</div>
						</div>
						<div class="h-h-sa-v-center" style="width:100%; height:45px; position: absolute;bottom:100px;">
							<Button type="success" shape="circle">立即申请</Button>
						</div>
					</div>
				</div>
				<div v-if="mode=='hot'?true:false" style="height:calc(76vh); position: relative;border-radius: 15px;overflow:hidden;flex: 1; width: 100%;"
				 class="demo-split v-h-start-v-start">
					<h3 style="margin:15px 0 15px 15px">
						<Icon type="ios-arrow-back" style="margin-bottom:3px; margin-right:10px" size="20" />商品详情</h3>
					<div style="width: 90%;margin: 0 auto; height: 100%;">
						<!-- <div style="width: 100%;margin: 0 auto;"> -->
						<Input style="width: 100%; margin-top: 20px;" search placeholder="Enter something..." />
						<!-- </div> -->
						<div class="h-h-start-v-center" style="margin:20px 0; font-size: 16px;">
							<span style="font-size: 14px;">热门</span>
						</div>
						<div style=" height: 100%; overflow-y: scroll;">
							<div v-for="(item,index) in 5" :key="index" style="width: 96%; height: 200px; border-radius: 10px;overflow: hidden; margin: 15px 10px;" class="demo-split">
								<div style="width: 100%;height: 160px; overflow: hidden;">
									<img style="width: 100%;" src="https://s3.ax1x.com/2021/02/24/yOKBPH.jpg" alt="">
								</div>
								<div class="v-h-start-v-start" style="margin: 0px 20px;">
									<h3>
										iPhone上最烦人的限制，今天终于取消
									</h3>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data2: this.getMockData(),
				targetKeys2: this.getTargetKeys(),
				mode: 'swipter'
			}
		},
		methods: {
			getMockData() {
				let mockData = [];
				for (let i = 1; i <= 20; i++) {
					mockData.push({
						key: i.toString(),
						label: 'Content ' + i,
						description: 'The desc of content  ' + i,
						disabled: Math.random() * 3 < 1
					});
				}
				return mockData;
			},
			getTargetKeys() {
				return this.getMockData()
					.filter(() => Math.random() * 2 > 1)
					.map(item => item.key);
			},
			handleChange2(newTargetKeys) {
				this.targetKeys2 = newTargetKeys;
			},
			filterMethod(data, query) {
				return data.label.indexOf(query) > -1;
			}
		}
	}
</script>

<style scoped>
	.demo-split {
		/* width:48%; */
		/* height: 200px; */
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
	}
</style>
